<template>
  <div class="login-container">
    <div class="login-form">
      <div class="logo-box">
        <img class="logo" src="@/assets/login-logo.png" alt="" />
      </div>
      <!-- <div class="login-title">后台管理系统</div> -->
      <sec-form
        @enter="loginClick"
        ref="formRef"
        class="formData"
        :formData="formData"
        :ruleForm="ruleForm"
        :rules="rules"
      ></sec-form>
      <div class="opt-btn">
        <el-button @click="loginClick" type="primary">立即登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { loginApi, getUserInfoApi } from "api";
export default {
  name: "Login",
  data() {
    return {
      formData: [
        { type: "text", prop: "username", placeholder: "请输入账号" },
        { type: "text", prop: "password", showPassword: true, placeholder: "请输入密码" },
      ],
      ruleForm: { username: "", password: "" },
      rules: {
        username: [
          ...this.config.inputRule,
          {
            pattern: /^[a-zA-Z0-9]{4,15}$/,
            message: "用户名长度必须在4到15个字符之间，并且只能包含字母和数字。",
            trigger: "blur",
          },
        ],
        password: [
          ...this.config.inputRule,
          {
            pattern: /^[a-zA-Z0-9!@#$%^&*]{4,20}$/,
            // message: "密码长度必须在4到20个字符之间，并且可以包含字母、数字以及特殊字符(! @ # $ % ^ & *)",
            message: "密码长度必须在4到20个字符之间，并且可以包含字母、数字以及特殊字符",
            trigger: "blur",
          },
        ],
      },
      loading: false,
    };
  },
  watch: {},
  created() {},

  mounted() {},
  methods: {
    getUserInfo() {
      getUserInfoApi().then((res) => {
        let data = res.data;
        let lyUserInfo = JSON.stringify(data || {});
        localStorage.setItem("lyUserInfo", lyUserInfo);
        this.$bus.$emit("lyUserInfoUpdate", data);
      });
    },
    loginClick() {
      if (this.$refs.formRef.validate()) {
        loginApi({ ...this.ruleForm }).then((res) => {
          let { data, code } = res;
          if (code == 0) {
            this.message.success({ message: "登录成功" });
            this.storage.setUserToken(data.access_token);
            this.getUserInfo(); //把用户信息存储到本地
            this.$router.push("/id/audit");
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$inputHeight: 48px;
.login-container {
  position: relative;
  height: 100vh;
  background: url("~@/assets/login-bg.jpeg") center center fixed no-repeat;
  background-size: cover;
}
.login-form {
  position: absolute;
  top: 50%;
  right: 40px;
  // height: 480px;
  width: 460px;
  border-radius: 16px;
  background: #fff;
  padding: 60px 50px;
  transform: translateY(-50%);
  .logo-box {
    text-align: center;
    margin-bottom: 10px;
    .logo {
      width: 200px;
    }
  }
}
.login-title {
  font-family: DingTalk;
  font-size: 30px;
  line-height: 43px;
  color: #1f2733;
  margin-bottom: 28px;
}

.login-container ::v-deep .el-input input {
  width: 360px;
  height: $inputHeight;
  line-height: $inputHeight;
  margin-bottom: 12px;
  font-size: 14px;
  color: #606266;
  background: #f6f4fc;
  border: 0;
  caret-color: #606266;
}
::v-deep .base-info-ruleForm {
  margin: 0px !important;
}
::v-deep .el-form-item__label {
  height: $inputHeight;
  line-height: $inputHeight;
  font-size: 14px;
}
.opt-btn {
  text-align: center;
  .el-button {
    font-family: NotoSans;
    font-size: 16px;
    width: 360px;
    height: 48px;
  }
}
</style>
